/*
  学习目标：组件封装-小结
  步骤：
     1. 善用vscode的类型提示
     2. 善用原生的html类型
     3. 善于借鉴文档上的类型
*/

import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { useHistory } from 'react-router-dom';

interface INavBarProps {
  onBack?: () => void;
  children?: React.ReactNode;
  right?: React.ReactNode;
}

export default function NavBar({ onBack, children, right }: INavBarProps) {
  const history = useHistory();

  return (
    <div className={styles.root}>
      <div className="main">
        <div className="left">
          <Icon type="iconfanhui" onClick={onBack || history.goBack} />
        </div>
        <div className="title">{children}</div>
        <div className="right">{right}</div>
      </div>
    </div>
  );
}
